<!--  -->
<template>
  <div class="progressol">
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="viewbox"></div>
    <div class="progress">
      <div class="maskbox" v-changeW="percent"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: ["percent"],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  directives: {
    changeW: {
      bind: function (el, binding) {
        console.log(el);
        console.log(binding);
        el.style.width = binding.value;
      },
    },
  },
};
</script>
<style scoped>
.progressol {
  width: 100%;
}
.progress {
  width: 100%;
  height: 40px;
  position: relative;
  background-color: #ccc;
}
.maskbox {
  height: 20px;
  position: absolute;
  top: 10px;
  left: 0;
  background-color: #ff0;
}
.viewbox {
  float: left;
  width: calc(10% - 10px);
  height: 20px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: 10px 5px;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>